<template>
  <div class="searchtop">
    <div class="top" v-show="!searchtopshow">
      <van-nav-bar left-text="返回" @click-left="onClickLeft" left-arrow></van-nav-bar>
      <van-cell-group class="singname">
        <van-field v-model="value" placeholder="请输入歌名" @keydown.enter="sevekeword" />
      </van-cell-group>
      <hr />
    </div>

    <div class="history">
      <!-- v-show="!this.playlist.hasMore" -->
      <div class="historyleft">历史</div>
      <history class="right">
        <div
          class="keyworkitem"
          @click="btnkeywork(item)"
          v-for="(item) in keyworklist"
          :key="item"
        >{{ item }}</div>
      </history>
      <div class="delete" @click="deletekeyworkitem">清空</div>
    </div>

    <search-list :playlist="playlist"></search-list>
  </div>
</template>

<script>
import searchList from './searchList.vue'
import { getsearch } from '../js/axios'
import { mapState, mapMutations } from 'vuex'



export default {
  computed: {
    ...mapState(['searchtopshow'])
  },
  components: {
    searchList
  },
  data () {
    return {
      value: '',
      keyworklist: [],
      playlist: {},
    }
  },
  created () {
    this.getkeyworklist()
  },
  methods: {
    btnkeywork (keywork) {
      this.value = keywork
      this.sevekeword()
    },
    getkeyworklist () {
      if (localStorage.keyworklist) {
        this.keyworklist = JSON.parse(localStorage.keyworklist)
        //  this.keyworklist.reverse()
        //   console.log(this.keyworklist)
      }
    },
    async deletekeyworkitem () {
      localStorage.keyworklist = []
      this.keyworklist = []
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    sevekeword () {
      this.keyworklist.unshift(this.value)
      this.keyworklist = [...new Set(this.keyworklist)]
      localStorage.keyworklist = JSON.stringify(this.keyworklist)
      // console.log(this.value)
      getsearch(this.value).then(res => {
        console.log(res.data)
        this.playlist = res.data.result
      })
    },
  }
}
</script>

<style>
/* .searchtop .van-nav-bar {
  z-index: 1;
} */
</style>

<style lang="less" scoped>
.searchtop {
  .top{
    position: relative;
    top: 0rem;
    width: 100%;
  .singname {
    position: fixed;
    top: 0rem;
    z-index: 9;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
  }
  hr {
    width: 90%;
    margin: 0 auto;
    color: #ccc;
  }
  }
  .history {
    display: flex;
    margin: 0.2rem;
    .historyleft {
      flex: 1;
    }
    .right {
      flex: 4;
      max-height: 3rem;
      overflow: scroll;

      .keyworkitem {
        float: left;
        margin: 0 0.1rem;
        color: #000;
        background-color: #eee;
        border-radius: 0.4rem;
        padding: 0.2rem;
      }
      .keyworkitem::before {
        content: "";
      }
    }
    .delete {
      flex: 1;
    }
  }
  
}
</style>